<template>
  <var-list
    style="padding-top: 40px"
    :finished="isLoadAll"
    v-model:loading="loading"
    @load="loadMore"
  >
    <DynamicItem @delete="handleDelete" :dataList />
  </var-list>
</template>

<script setup lang="ts">
import { useListLoad } from '@/hooks/useListLoad'
import { getDynamicList } from '@/api'
import DynamicItem from '@/components/DynamicItem.vue'
import { useInfoStore } from '@/store/info'
const router = useRouter()

const infoStore = useInfoStore()

if (infoStore.myActive !== 'dynamic') {
  infoStore.myActive = 'dynamic'
}
const getData = async (reset = false) => {
  reset && resetFn()
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    userId: infoStore.userInfo.id,
    sort: 'desc'
  }
  loading.value = true
  const res = await getDynamicList(params)
  dataList.value = dataList.value.concat(res.list)
  isLoadAll.value = !!(res.total <= dataList.value.length)
  loading.value = false
}

const {
  loading,
  dataList,
  pageNum,
  pageSize,
  isLoadAll,
  reset: resetFn,
  loadMore
} = useListLoad(getData)
const handleDelete = id => {
  dataList.value = dataList.value.filter(item => item.id !== id)
}
</script>

<style scoped lang="scss"></style>
